<template>
    <div class="tourist_flow">
        <div class="common_header">
            <div class="header-img"><img src="../assets/imgs/nav_bar_return@2x.png" alt="" @click="$router.go(-1)"></div>
            <div class="header-title">游客流量</div>
            <div class="custom-tabs">
                <div class="custom-tab-item" :class="{active:active === 0}" @click="active = 0">景区</div>
                <div class="custom-tab-item" :class="{active:active === 1}" @click="active = 1">景点</div>
            </div>
        </div>
        <div class="content" v-show="active === 0">
            <div class="content_pian" style="padding-right: 0.1rem">
                <div class="content_title">日客流量</div>
                <div id="day_num"></div>
            </div>
            <div class="content_pian">
                <div class="content_title">停留时长</div>
                <div id="stay_time"></div>
            </div>
        </div>
        <div class="content" v-show="active === 1">
            <div class="content_pian" style="padding-right: 0.1rem">
                <div class="content_title">景点单日客流量排行</div>
                <div id="spot_day_num"></div>
            </div>
            <div class="content_pian">
                <div class="content_title">景点单日停留时长排行</div>
                <div id="spot_day_time"></div>
            </div>
        </div>

    </div>
</template>
<script>
    import echarts from 'echarts';
    import {Notify,Loading} from 'vant';
    export default {
        name: "index",
        components: {
            [Notify.name]: Notify,
            [Loading.name]: Loading
        },
        data() {
            return {
                active: 0,
                tr_id:''
            };
        },
        mounted() {
            this.tr_id = localStorage.getItem('tr_id');
            this.getALLData(['crowdFlow','tourismResortStayTop','tourismAttractionTop','tourismAttractionsStayTop']);
        },
        methods: {
            getALLData(arg) {
                // this.$store.commit('showLoading');
                this.$http.get('auth/mac?tr_id=' +this.tr_id, {
                    params: {
                        "@action": arg.join(',')
                    }
                })
                    .then((result) => {
                        this.tourismAttractionTop(result.data.tourismAttractionTop);
                        this.tourismAttractionsStayTop(result.data.tourismAttractionsStayTop);
                        this.crowdFlow(result.data.crowdFlow);
                        this.tourismResortStayTop(result.data.tourismResortStayTop);
                        // this.$store.commit('hideLoading');
                    })
                    .catch((err)=>{
                        // this.$store.commit('hideLoading');
                        Notify({
                            message: err.data.msg || "数据异常，请重试",
                            duration: 1000,
                            background: '#ff0000'
                        })
                    })

            },
            tourismResortStayTop(data) {
                // let data = [
                //     {label:'<1小时',value:'175'},
                //     {label:'1-3小时',value:'50'},
                //     {label:'3-6小时',value:'10'},
                //     {label:'>6小时',value:'20'}
                // ];
                let color = ['#426CFF','#FF4A60','#1EDEB4','#FF8454'];
                let legendData=[],seriesData=[];
                let compare = function (obj1, obj2) {
                    let val1 = obj1.value;
                    let val2 = obj2.value;
                    if (val1 < val2) {
                        return -1;
                    } else if (val1 > val2) {
                        return 1;
                    } else {
                        return 0;
                    }
                };
                let arrData = data.sort(compare).reverse();
                for (let i=0;i<arrData.length;i++) {
                    legendData.push(arrData[i].label);
                    seriesData.push(arrData[i].value);
                }
                let myChart = echarts.init(document.getElementById('stay_time'));
                let option = {
                    textStyle: {
                        color: '#fff'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        y:'bottom',
                        itemWidth: 12,
                        itemHeight: 12,
                        textStyle: {
                            color: '#747FA1'
                        },
                        // data:['<1小时','1-3小时','3-5小时','>5小时']
                        data:legendData
                    },
                    calculable : true,
                    series : [
                        {
                            name:'停留时长',
                            type:'pie',
                            radius : [30, 110],
                            center : ['50%', '50%'],
                            roseType : 'area',
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            },
                            label: {
                                normal: {
                                    formatter: "{b}\n{d|{d}}%",
                                    padding: [4, -20],
                                    rich: {
                                        d: {
                                            color: '#747FA1',
                                            align: 'center'
                                        }
                                    },
                                    textStyle: {
                                        color: '#747FA1'
                                    }

                                }
                            },
                            labelLine: {
                                // length: 4,
                                // length2: 10,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#747FA1'
                                }
                            },
                            data: []
                        }
                    ]
                };
                for (let j1 = 0; j1 < seriesData.length; j1++) {
                    option.series[0].data.push({
                        value: seriesData[j1],
                        name: legendData[j1],
                        textStyle: {
                            color: '#fff'
                        },
                        itemStyle: {
                            normal: {
                                color: {
                                    colorStops: [{
                                        offset: 0,
                                        color: color[j1] // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: color[j1] // 100% 处的颜色
                                    }]
                                }
                            }
                        }
                    });
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            crowdFlow(data) {
                // let data = [
                //     {time:'9:00',crowdCount:'50'},
                //     {time:'11:00',crowdCount:'50'},
                //     {time:'13:00',crowdCount:'100'},
                //     {time:'15:00',crowdCount:'200'},
                //     {time:'17:00',crowdCount:'50'}
                // ];
                let xAxisData=[],seriesData=[];
                for (let i=0;i<data.length;i++) {
                    xAxisData.push(data[i].time);
                    seriesData.push(data[i].crowdCount);
                }
                let myChart = echarts.init(document.getElementById('day_num'));
                let option = {
                    title: {
                        text: '',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 12,
                            color: '#F1F1F3'
                        },
                        left: '6%'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: '#57617B'
                            }
                        }
                    },
                    grid: {
                        left: '4%',
                        right: '2%',
                        bottom: '1%',
                        top: '10%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        // data:['2点10分','3点10分','4点10分','5点10分','6点10分','7点10分','8点10分'] ,
                        data:xAxisData,
                        axisLabel: {
                            show: false,
                            interval: 0,
                            rotate: 0,
                            textStyle: {
                                color: '#747FA1',
                                fontSize: 10
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        // interval: 40,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#00DAEE'
                            }
                        },
                        axisLabel: {
                            left: 10,
                            textStyle: {
                                color: '#747FA1',
                                fontSize: 10
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        }
                    }],
                    series: [{
                        name: '',
                        type: 'line',
                        smooth: true,
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 1,
                                    color: '#5CBEFF'
                                }, {
                                    offset:0,
                                    color: '#133AFC'
                                }], false),
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 1,
                                    color: 'rgba(66, 120, 255, 0)'
                                }, {
                                    offset: 0,
                                    color: 'rgba(66, 120, 255, 0.8)'
                                }]),
                                shadowColor: 'rgba(228, 139, 76, 0.1)',
                                shadowBlur: 10
                            }
                        },
                        symbolSize: 4,
                        itemStyle: {
                            normal: {
                                color: '#71FFD5',
                                borderColor: '#e48b4c'
                            }
                        },
                        data: seriesData
                    }]
                };
                myChart.setOption(option);
            },
            tourismAttractionTop(data) {
                // let data = [
                //     {'特征': '成都市自贡市发斯蒂芬', '占比': '90%'},
                //     {'特征': '成都市自贡市', '占比': '90%'},
                //     {'特征': '成都市', '占比': '90%'},
                //     {'特征': '成都市', '占比': '90%'},
                //     {'特征': '成都市', '占比': '90%'},
                //     {'特征': '北京市', '占比': '35%'},
                //     {'特征': '山东', '占比': '50%'},
                //     {'特征': '江苏', '占比': '40%'},
                //     {'特征': '上海市', '占比': '20%'},
                //     {'特征': '台湾', '占比': '10%'},
                //     {'特征': '台湾', '占比': '10%'},
                //     {'特征': '台湾', '占比': '10%'},
                //     {'特征': '台湾', '占比': '10%'},
                // ];
                let color = [
                    ['rgba(0,208,207,0)', 'rgba(0,208,207,1)'],
                    ['rgba(255,144,78,0)', 'rgba(255,144,78,1)'],
                    ['rgba(47,125,255,0)', 'rgba(47,125,255,1)'],
                    ['rgba(139,59,255,0)', 'rgba(139,59,255,1)'],
                    ['rgba(223,9,237,0)', 'rgba(223,9,237,1)'],
                    ['rgba(107,237,9,0)', 'rgba(107,237,9,1)'],
                    ['rgba(241,81,101,0)', 'rgba(241,81,101,1)'],
                    ['rgba(113,255,213,0)', 'rgba(113,255,213,1)'],
                    ['rgba(33,11,126,0)', 'rgba(33,11,126,1)'],
                    ['rgba(143,134,184,0)', 'rgba(143,134,184,1)'],
                    ['rgba(248,5,243,0)', 'rgba(248,5,243,1)'],
                    ['rgba(174,27,103,0)', 'rgba(174,27,103,1)'],
                    ['rgba(164,201,202,0)', 'rgba(164,201,202,1)'],
                    ['rgba(168,164,202,0)', 'rgba(168,164,202,1)'],
                    ['rgba(246,193,15,0)', 'rgba(246,193,15,1)'],
                    ['rgba(149,246,15,0)', 'rgba(149,246,15,1)'],
                    ['rgba(80,248,106,0)', 'rgba(80,248,106,1)'],
                    ['rgba(80,242,248,0)', 'rgba(80,242,248,1)'],
                    ['rgba(248,216,8,0)', 'rgba(248,216,8,1)'],
                    ['rgba(142,235,187,0)', 'rgba(142,235,187,1)'],
                    ['rgba(237,23,9,0)', 'rgba(237,23,9,1)'],
                    ['rgba(180,167,810)', 'rgba(180,167,81,1)'],
                    ['rgba(248,243,210,0)', 'rgba(248,243,210,1)'],
                    ['rgba(223,248,210,0)', 'rgba(223,248,210,1)'],
                    ['rgba(215,168,112,0)', 'rgba(215,168,112,1)'],
                    ['rgba(241,133,8,0)', 'rgba(241,133,8,1)'],
                    ['rgba(237,23,9,0)', 'rgba(237,23,9,1)'],
                    ['rgba(157,130,99,0)', 'rgba(157,130,99,1)']

                ];
                let yAxisData = [], seriesData = [];
                let compare = function (obj1, obj2) {
                    let val1 = obj1.crowdCount;
                    let val2 = obj2.crowdCount;
                    if (val1 < val2) {
                        return -1;
                    } else if (val1 > val2) {
                        return 1;
                    } else {
                        return 0;
                    }
                };
                let arrData = data.sort(compare); //数组对象从小到大排序，使用reverse()方法颠倒排序
                for (let i = 0; i < arrData.length; i++) {
                    yAxisData.push(data[i].ta_name);
                    seriesData.push(data[i].crowdCount);
                }
                let myChart = echarts.init(document.getElementById('spot_day_num'));
                let option = {
                    tooltip: {
                        show: true,
                        formatter: "{b} <br> {c}人"
                    },
                    grid: {
                        // left: 80,
                        top: 0,
                        bottom: 20,
                        x: 60
                    },
                    xAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#747FA1',
                                fontSize: 12
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'category',
                        // data: ['美食订单订单', '购物', '门票', '交通', '娱乐', '门票', '交通', '娱乐'],
                        data: yAxisData,
                        // minInterval: 1,
                        axisTick: {
                            // color:'#fff',
                            show: false,
                        },
                        axisLine: {
                            //  color:'#fff',
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#747FA1',
                                fontSize: 12
                            },
                            interval: 0,
                            formatter: function(value) {
                                if ( value.length > 4) {
                                    if (value.length>9) {
                                        return `${value.substring(0, 4)}\n${value.substring(4, 7)}...`;
                                    } else {
                                        return `${value.substring(0, 4)}\n${value.substring(4, 9)}`;
                                    }
                                } else {
                                    return value;
                                }
                            }
                        }

                    }],
                    series: [{
                        name: '景点排行',
                        type: 'bar',
                        barWidth: 10,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}人',
                                textStyle: {
                                    color: '#747FA1',
                                    fontSize: '12'
                                }
                            }
                        },
                        data: []
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                for (let j1 = 0; j1 < seriesData.length; j1++) {
                    option.series[0].data.push({
                        value: seriesData[j1],
                        name: yAxisData[j1],
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 10, 10, 0],
                                color: {
                                    type: 'bar',
                                    colorStops: [{
                                        offset: 0,
                                        color: color[j1][1] // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: color[j1][1] // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false

                                }
                            }
                        }
                    });
                }
                myChart.setOption(option);
                let autoHeight = data.length * 30 + 50;
                myChart.getDom().style.height = autoHeight + "px";
                myChart.resize();
            }, // 景点单日客流量排行
            tourismAttractionsStayTop(data) {
                // let data = [
                //     {'特征': '成都市adfadfasdfasdf', '占比': '90%'},
                //     {'特征': '成都dfasfasd市', '占比': '90%'},
                //     {'特征': '成都市', '占比': '90%'},
                //     {'特征': '成都市', '占比': '90%'},
                //     {'特征': '成都市', '占比': '90%'},
                //     {'特征': '北京市', '占比': '35%'},
                //     {'特征': '山东', '占比': '50%'},
                //     {'特征': '江苏', '占比': '40%'},
                //     {'特征': '上海市', '占比': '20%'},
                //     {'特征': '台湾', '占比': '10%'},
                //     {'特征': '台湾', '占比': '10%'},
                //     {'特征': '台湾', '占比': '10%'},
                //     {'特征': '台湾', '占比': '10%'},
                // ];
                let color = [
                    ['rgba(0,208,207,0)', 'rgba(0,208,207,1)'],
                    ['rgba(255,144,78,0)', 'rgba(255,144,78,1)'],
                    ['rgba(47,125,255,0)', 'rgba(47,125,255,1)'],
                    ['rgba(139,59,255,0)', 'rgba(139,59,255,1)'],
                    ['rgba(223,9,237,0)', 'rgba(223,9,237,1)'],
                    ['rgba(107,237,9,0)', 'rgba(107,237,9,1)'],
                    ['rgba(241,81,101,0)', 'rgba(241,81,101,1)'],
                    ['rgba(113,255,213,0)', 'rgba(113,255,213,1)'],
                    ['rgba(33,11,126,0)', 'rgba(33,11,126,1)'],
                    ['rgba(143,134,184,0)', 'rgba(143,134,184,1)'],
                    ['rgba(248,5,243,0)', 'rgba(248,5,243,1)'],
                    ['rgba(174,27,103,0)', 'rgba(174,27,103,1)'],
                    ['rgba(164,201,202,0)', 'rgba(164,201,202,1)'],
                    ['rgba(168,164,202,0)', 'rgba(168,164,202,1)'],
                    ['rgba(246,193,15,0)', 'rgba(246,193,15,1)'],
                    ['rgba(149,246,15,0)', 'rgba(149,246,15,1)'],
                    ['rgba(80,248,106,0)', 'rgba(80,248,106,1)'],
                    ['rgba(80,242,248,0)', 'rgba(80,242,248,1)'],
                    ['rgba(248,216,8,0)', 'rgba(248,216,8,1)'],
                    ['rgba(142,235,187,0)', 'rgba(142,235,187,1)'],
                    ['rgba(237,23,9,0)', 'rgba(237,23,9,1)'],
                    ['rgba(180,167,810)', 'rgba(180,167,81,1)'],
                    ['rgba(248,243,210,0)', 'rgba(248,243,210,1)'],
                    ['rgba(223,248,210,0)', 'rgba(223,248,210,1)'],
                    ['rgba(215,168,112,0)', 'rgba(215,168,112,1)'],
                    ['rgba(241,133,8,0)', 'rgba(241,133,8,1)'],
                    ['rgba(237,23,9,0)', 'rgba(237,23,9,1)'],
                    ['rgba(157,130,99,0)', 'rgba(157,130,99,1)']

                ];
                let yAxisData = [], seriesData = [];
                let compare = function (obj1, obj2) {
                    let val1 = obj1.crowdCount;
                    let val2 = obj2.crowdCount;
                    if (val1 < val2) {
                        return -1;
                    } else if (val1 > val2) {
                        return 1;
                    } else {
                        return 0;
                    }
                };
                let arrData = data.sort(compare); //数组对象从小到大排序，使用reverse()方法颠倒排序
                for (let i = 0; i < arrData.length; i++) {
                    yAxisData.push(data[i].ta_name);
                    seriesData.push(data[i].countPercentage.replace('%',''));
                }
                yAxisData = yAxisData.reverse();
                seriesData = seriesData.reverse();
                let myChart = echarts.init(document.getElementById('spot_day_time'));
                let option = {
                    tooltip: {
                        show: true,
                        formatter: "{b} <br> {c}%"
                    },
                    grid: {
                        // left: 80,
                        top: 0,
                        bottom: 20,
                        x: 60,
                        label:{
                            normal:{
                                formatter: function (name) {
                                    if (name.length >3) {}
                                    return name.slice(0,2)
                                },
                            }
                        }

                    },
                    xAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#747FA1',
                                fontSize: 12
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'category',
                        // data: ['美食订单订单', '购物', '门票', '交通', '娱乐', '门票', '交通', '娱乐'],
                        data: yAxisData,
                        // minInterval: 1,
                        axisTick: {
                            // color:'#fff',
                            show: false,
                        },
                        axisLine: {
                            //  color:'#fff',
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#747FA1',
                                fontSize: 12
                            },
                            interval: 0,
                            formatter: function(value) {
                                if ( value.length > 4) {
                                    if (value.length>9) {
                                        return `${value.substring(0, 4)}\n${value.substring(4, 7)}...`;
                                    } else {
                                        return `${value.substring(0, 4)}\n${value.substring(4, 9)}`;
                                    }
                                } else {
                                    return value;
                                }
                            }
                        }

                    }],
                    series: [{
                        name: '景点排行',
                        type: 'bar',
                        barWidth: 10,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}%',
                                textStyle: {
                                    color: '#747FA1',
                                    fontSize: '12'
                                }
                            }
                        },
                        data: []
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                for (let j1 = 0; j1 < seriesData.length; j1++) {
                    option.series[0].data.push({
                        value: seriesData[j1],
                        name: yAxisData[j1],
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 10, 10, 0],
                                color: {
                                    type: 'bar',
                                    colorStops: [{
                                        offset: 0,
                                        color: color[j1][1] // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: color[j1][1] // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false

                                }
                            }
                        }
                    });
                }
                myChart.setOption(option);
                let autoHeight = data.length * 30 + 50;
                myChart.getDom().style.height = autoHeight + "px";
                myChart.resize();
            } // 景点单日客停留排行
        }
    };
</script>

<style scoped lang="less">
    .custom-tabs {
        /*height: 55px;*/
        padding: 0 20px;
        border-bottom: 0.5px solid #f6f6f6;
    }

    .custom-tab-item {
        display: inline-block;
        line-height: 0.44rem;
        height: 0.44rem;
        margin-right: 0.3rem;
        color:rgba(40,44,52,1);
        cursor: pointer;
    }

    .custom-tab-item.active {
        font-weight: 700;
        color:rgba(40,44,52,1);
        border-bottom: 2px solid #4588d4;
    }

    .custom-tab-content {
        padding-top: 60px;
        height: 100%;
        /* position: relative; */
    }
</style>
<style scoped lang="less">
    .tourist_flow {
        padding: 1.6rem 0 0.34rem;
    }

    .content_pian {
        width: 3.43rem;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rem 0.08rem 0.4rem 0rem rgba(119, 136, 175, 0.2);
        border-radius: 0.08rem;
        margin: 0.2rem auto 0;
        padding-bottom: 0.2rem;
        .content_title {
            padding: 0.2rem 0 0.2rem 0.16rem;
            font-size: 0.15rem;
            font-weight: bold;
            color: rgba(40, 44, 52, 1);
            line-height: 0.16rem;
        }
        .consumption_level {
            display: flex;
            justify-content: space-around;
        }
        .consumption_biao {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .name {
                font-size: 0.12rem;
                color: rgba(116, 127, 161, 1);
                line-height: 0.12rem;
                padding-top: 0.12rem;
            }
        }
        #stay_time{
            width:  3.43rem;
            height: 2.8rem;
        }#day_num{
            width: 3.43rem;
            height: 3rem;
        }#spot_day_num,#spot_day_time{
            width: 3.43rem;
            /*height: 3rem;*/
        }
    }
</style>


